<script setup lang="ts">
import { ref } from 'vue';

import {
  LinkOutlined,
  SafetyCertificateOutlined,
  TrophyOutlined,
} from '@ant-design/icons-vue';
import dayjs from 'dayjs';

interface Honor {
  id: string;
  memberId: string;
  memberName: string;
  memberAvatar: string;
  title: string;
  category: string;
  awardDate: string;
  issuer: string;
  description: string;
  sbtTokenId: number;
  sourceUrl?: string;
}

const detailModalVisible = ref(false);
const selectedHonor = ref<Honor | null>(null);

// Mock荣誉数据
const honors = ref<Honor[]>([
  {
    id: 'honor-1',
    memberId: 'zhu-1',
    memberName: '朱元璋',
    memberAvatar:
      'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuYuanzhang',
    title: '开国皇帝',
    category: '政治成就',
    awardDate: '1368-01-23',
    issuer: '天命所归',
    description: '驱除鞑虏，恢复中华，建立大明王朝',
    sbtTokenId: 2001,
  },
  {
    id: 'honor-2',
    memberId: 'zhu-2-4',
    memberName: '朱棣',
    memberAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuDi',
    title: '永乐大典总纂',
    category: '文化贡献',
    awardDate: '1408-11-01',
    issuer: '大明朝廷',
    description: '主持编纂永乐大典，集天下图书之大成',
    sbtTokenId: 2002,
  },
  {
    id: 'honor-3',
    memberId: 'zhu-2-5',
    memberName: '朱橚',
    memberAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuSu',
    title: '《救荒本草》作者',
    category: '学术成就',
    awardDate: '1406-05-10',
    issuer: '医学界',
    description: '编撰救荒本草，造福百姓，留传后世',
    sbtTokenId: 2003,
  },
  {
    id: 'honor-4',
    memberId: 'zhu-4-1',
    memberName: '朱瞻基',
    memberAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuZhanji',
    title: '书画名家',
    category: '艺术成就',
    awardDate: '1430-03-15',
    issuer: '大明画院',
    description: '擅长书法绘画，尤工花鸟，作品传世',
    sbtTokenId: 2004,
  },
]);

function viewHonorDetail(honor: Honor) {
  selectedHonor.value = honor;
  detailModalVisible.value = true;
}

function formatTime(time: string) {
  return dayjs(time).format('YYYY年MM月DD日');
}

function viewOnChain(honor: Honor) {
  window.open(`https://scan.example.com/token/${honor.sbtTokenId}`, '_blank');
}
</script>

<template>
  <div class="honor-wall">
    <a-card title="🏆 朱氏名人墙">
      <a-row :gutter="16">
        <a-col
          v-for="honor in honors"
          :key="honor.id"
          :span="6"
          style="margin-bottom: 16px"
        >
          <div class="honor-card" @click="viewHonorDetail(honor)">
            <div class="card-inner">
              <div class="card-front">
                <img :src="honor.memberAvatar" :alt="honor.memberName" />
                <div class="honor-badge">
                  <TrophyOutlined />
                </div>
              </div>
              <div class="card-back">
                <h4>{{ honor.memberName }}</h4>
                <p>{{ honor.title }}</p>
                <a-tag color="gold">{{ honor.category }}</a-tag>
                <div class="sbt-info">
                  <SafetyCertificateOutlined />
                  SBT #{{ honor.sbtTokenId }}
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <!-- 荣誉详情Modal -->
    <a-modal v-model:open="detailModalVisible" title="荣誉详情" width="600px">
      <div v-if="selectedHonor" class="honor-detail">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="成员">
            {{ selectedHonor.memberName }}
          </a-descriptions-item>
          <a-descriptions-item label="荣誉">
            {{ selectedHonor.title }}
          </a-descriptions-item>
          <a-descriptions-item label="类别">
            {{ selectedHonor.category }}
          </a-descriptions-item>
          <a-descriptions-item label="获得时间">
            {{ formatTime(selectedHonor.awardDate) }}
          </a-descriptions-item>
          <a-descriptions-item label="颁发机构">
            {{ selectedHonor.issuer }}
          </a-descriptions-item>
          <a-descriptions-item label="SBT Token ID">
            {{ selectedHonor.sbtTokenId }}
          </a-descriptions-item>
        </a-descriptions>
        <p style="margin-top: 16px; line-height: 1.6">
          {{ selectedHonor.description }}
        </p>
        <a-button
          type="primary"
          block
          @click="viewOnChain(selectedHonor)"
          style="margin-top: 16px"
        >
          <LinkOutlined /> 查看链上信息
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.honor-wall {
  .honor-card {
    height: 250px;
    cursor: pointer;
    perspective: 1000px;

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;

      .card-front,
      .card-back {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 16px;
        border-radius: 8px;
        backface-visibility: hidden;
      }

      .card-front {
        position: relative;
        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);

        img {
          width: 120px;
          height: 120px;
          object-fit: cover;
          border: 4px solid white;
          border-radius: 50%;
        }

        .honor-badge {
          position: absolute;
          top: 16px;
          right: 16px;
          font-size: 32px;
          color: #ff6b6b;
        }
      }

      .card-back {
        color: white;
        background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
        transform: rotateY(180deg);

        h4 {
          margin: 0 0 8px;
          font-size: 18px;
          color: white;
        }

        p {
          margin: 0 0 12px;
          font-size: 14px;
          text-align: center;
        }

        .sbt-info {
          margin-top: 12px;
          font-size: 12px;
          opacity: 0.9;
        }
      }
    }

    &:hover .card-inner {
      transform: rotateY(180deg);
    }
  }
}
</style>
